<template>
	<view class="ResetPassword">
		<image class="bgi" :src="imgPath+'login/Background.png'" mode=""></image>
		<view class="back-box">
			<image class="icon" @tap="back" :src="imgPath+'createAvatar/back.svg'" mode=""></image>
			<view class="title">忘记密码</view>
			<view class="right-btns"></view>
		</view>
		<view class="cont-b">
			<view class="form">
				<view class="form-item">
					<view class="label">
						手机号
					</view>
					<view class="row">
						<view class="box text">
							+86
						</view>
						<view class="box input-box">
							<input class="ipt" type="text" placeholder="请输入您的手机号码" placeholder-class="placeholder"
								v-model="mobile" />
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="label">
						验证码
					</view>
					<view class="row">
						<view class="box input-box">
							<input class="ipt" type="text" v-model="smsCode" placeholder="请输入验证码"
								placeholder-class="placeholder" />
						</view>
						<view class="box getCode" @click="sendcode()">
							<text v-if="!smsState" class="activate">获取验证码</text>
							<text v-else class="un-activate">重新发送({{ times }})</text>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="label">
						设置新密码
					</view>
					<view class="row">
						<view class="box input-box">
							<input class="ipt" type="text" placeholder="请输入您的新密码" placeholder-class="placeholder"
								v-model="mobile" />
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="label">
						确认新密码
					</view>
					<view class="row">
						<view class="box input-box">
							<input class="ipt" type="text" placeholder="请再次输入新密码" placeholder-class="placeholder"
								v-model="password" />
						</view>
					</view>
				</view>
			</view>
			<view class="cont-btn">
				<view class="btn style1" @tap="submit">
					<view class="text">
						提交
					</view>
				</view>
			</view>
		</view>
		<ConfirmDialog :dialogShow="dialogShow" title="新密码设置成功" cont="您的新密码已设置成功，赶快去登录使用吧~" :btns="confirmDialogBtns"
			@toPage="toPage"></ConfirmDialog>

	</view>
</template>

<script>
	import * as api from '@/api/login.js'
	import ConfirmDialog from '@/components/confirm-dialog/confirm-dialog.vue';
	import {
		tools
	} from '../../utils/util';
	export default {
		name: "ResetPassword",
		data() {
			return {
				// 静态资源通用地址
				imgPath: tools.imgPath,
				dialogShow: false,
				confirmDialogBtns: [{
					text: '返回登录',
					fnName: 'toPage',
					args: ['/pages/login/login'],
				}]
			};
		},
		methods: {
			//跳转页面
			toPage(path) {
				uni.reLaunch({
					url: path
				});
			},
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 提交
			submit() {
				this.dialogShow = true;
			}
		},
		components: {
			ConfirmDialog
		}
	};
</script>

<style lang="scss">
	.ResetPassword {
		position: relative;
		height: 100vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 4vw;
		overflow: hidden;

		.bgi {
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			top: 0vw;
			left: 0vw;
		}

		.back-box {
			position: relative;
			top: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 3vw 0vw;
			box-sizing: border-box;

			.icon {
				width: 6vw;
				height: 6vw;
				display: block;
			}

			.title {
				font-size: 36rpx;
				color: rgba(255, 255, 255, 1);
			}

			.right-btns {
				display: flex;

				.btn-item {
					display: flex;
					border-radius: 100vw;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 2vw;
					padding: 1vw 2vw;
					font-size: 30rpx;

					&.style1 {
						border: 1px solid rgba(0, 222, 185, 1);
						color: rgba(0, 222, 185, 1);
					}

					&.style2 {
						background: linear-gradient(270deg, rgba(0, 222, 185, 1) 0%, rgba(122, 255, 233, 1) 100%);
						color: #111111;
					}
				}
			}
		}

		.cont-b {
			flex: 5;
			padding-top: 16vw;
			display: flex;
			flex-direction: column;

			.form {
				margin-top: 5vw;

				.form-item {
					font-size: 32rpx;
					font-weight: 500;
					margin-bottom: 6vw;

					.label {
						font-size: 32rpx;
						font-weight: 500;
						line-height: 22.4px;
						color: rgba(0, 153, 127, 1);
					}

					.row {
						display: flex;
						margin-top: 3vw;

						.box {
							border-radius: 2.5vw;
							min-height: 10vw;
							background: rgba(255, 255, 255, 0.08);
							backdrop-filter: blur(26px);
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 0vw 3vw;

							&.text {
								font-size: 36rpx;
								font-weight: 500;
								color: rgba(255, 255, 255, 1);
								margin-right: 2vw;
							}

							&.input-box {
								flex: 1;
								box-sizing: border-box;
								padding: 0vw 2vw;
								font-size: 28rpx;

								.ipt {
									width: 100%;
									height: 100%;
									color: #fff;
								}

								.placeholder {
									font-weight: 400;
									color: rgba(116, 153, 141, 1);
								}
							}

							&.getCode {
								margin-left: 2vw;
								width: 23vw;
								font-size: 28rpx;
								font-weight: 400;
								color: rgba(0, 153, 127, 1);
							}
						}
					}

					.tips-btn {
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(116, 153, 141, 1);
						text-align: right;
					}
				}
			}

			.cont-btn {
				flex: 1;
				box-sizing: border-box;
				padding-top: 10vw;

				.btn {
					margin-top: 6vw;
					height: 12vw;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 2.5vw;
					font-size: 32rpx;

					&.style1 {
						background: rgba(0, 153, 127, 1);
						position: relative;

						.text {
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
						}

						.huojian {
							width: 30%;
							position: absolute;
							bottom: 0vw;
							right: 2.5vw;
						}
					}

					&.style2 {
						background: transparent;

						.text {
							color: rgba(0, 153, 127, 1);
						}
					}
				}
			}
		}

		.dialog-box {
			position: absolute;
			height: 100vh;
			width: 100%;
			top: 0vw;
			left: 0vw;
			background: rgba(0, 0, 0, 0.7);
			display: flex;
			justify-content: center;
			align-items: center;

			.dialog {
				border-radius: 3vw;
				background: #fff;
				display: flex;
				flex-direction: column;
				padding: 4vw;
				width: 68vw;

				.t {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 36rpx;
						font-weight: 700;
						color: rgba(51, 51, 51, 1);
					}
				}

				.b {
					display: flex;
					flex-direction: column;

					.cont {
						margin: 5vw 0vw;
						font-size: 28rpx;
						color: rgba(102, 102, 102, 1);
					}

					.btn {
						width: max-content;
						height: max-content;
						padding: 1.5vw 7vw;
						margin: 0vw auto;
						border-radius: 2vw;
						background: rgba(0, 153, 127, 1);
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
</style>